<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
	<style type="text/css">
		.swiper-container {
		    width: 600px;
		    height: 300px;
		} 
	</style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script type="text/javascript">
    	var mySwiper = new Swiper ('.swiper-container', 
		{
    	    //direction: 'vertical', // 垂直切换选项
    	    loop: true, // 循环模式选项
    	    
    	    // 如果需要分页器
    	    pagination: {
    	      el: '.swiper-pagination',
    	    },
    	    
    	    // 如果需要前进后退按钮
    	    navigation: {
    	      nextEl: '.swiper-button-next',
    	      prevEl: '.swiper-button-prev',
    	    },
    	    
    	    // 如果需要滚动条
    	    // scrollbar: {
    	    //   el: '.swiper-scrollbar',
    	    // },
    	  })     
    </script>
</body>
</html>